/* eslint-disable jsx-a11y/label-has-associated-control */
import type { MetaFunction } from "@remix-run/node";
import { redirect } from "@remix-run/react";

export const meta: MetaFunction = () => {
  return [
    { title: "Remix Backend" },
    { name: "description", content: "Welcome to Remix Backend!" },
  ];
};

export const loader = async () => {
  return redirect("/admin");
}

// export default function Index() {
//   const [isSidebarOpen, setIsSidebarOpen] = useState(true);

//   const [theme, setTheme] = useTheme();
//   const changeTheme = (e: React.ChangeEvent<HTMLInputElement>) => {
//     e.target.checked ? setTheme(Theme.DARK) : setTheme(Theme.LIGHT);
//   };

//   const toggleSidebar = () => {
//     setIsSidebarOpen(!isSidebarOpen);
//   };

//   return (
//     <div className="flex flex-auto">
//       <aside className={`duration-300 ease-in-out ${isSidebarOpen ? 'w-64' : 'w-24 hover:w-64 hover:-mr-40 z-10 bg-base-100'}`}>
//         <div className="grid grid-cols-5 px-5 pt-5 pb-2">
//           <svg xmlns="http://www.w3.org/2000/svg" className="size-7 w-10 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
//             <path strokeLinecap="round" strokeLinejoin="round" d="M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3" />
//           </svg>
//           <span className={`col-span-4 text-lg font-semibold truncate transition-all duration-300 ease-in-out ${isSidebarOpen ? "opacity-100" : "opacity-0 w-0"}`}>
//             Remix Backend
//           </span>
//         </div>
//         <ul className="menu w-full pl-4 pr-5">
//           <li>
//             <NavLink to="/">
//               <svg xmlns="http://www.w3.org/2000/svg" className="size-5 m-0 p-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
//                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
//               </svg>
//               <span className={`text-lg font-semibold truncate transition-all duration-300 ease-in-out`}>
//                 Home
//               </span>
//             </NavLink>
//           </li>
//           <li>
//             <details>
//               <summary>
//                 <svg xmlns="http://www.w3.org/2000/svg" className="size-5 m-0 p-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
//                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
//                 </svg>
//                 Parent
//               </summary>
//               <ul>
//                 <li>
//                   <NavLink to="/admin/test">
//                     <span className='text-lg font-semibold truncate transition-all duration-300 ease-in-out'>
//                       Test
//                     </span>
//                   </NavLink>
//                 </li>
//                 <li><a>Submenu 2</a></li>
//                 <li>
//                   <details>
//                     <summary>Parent</summary>
//                     <ul>
//                       <li><a>Submenu 1</a></li>
//                       <li><a>Submenu 2</a></li>
//                     </ul>
//                   </details>
//                 </li>
//               </ul>
//             </details>
//           </li>
//         </ul>
//       </aside>
//       <div className="flex-1 px-8 py-2.5">
//         <div className="flex justify-between items-center">
//           {/* Search input */}
//           <label className="input flex items-center gap-2">
//             <svg
//               xmlns="http://www.w3.org/2000/svg"
//               viewBox="0 0 16 16"
//               fill="currentColor"
//               className="h-4 w-4 opacity-70">
//               <path
//                 fillRule="evenodd"
//                 d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
//                 clipRule="evenodd" />
//             </svg>
//             <input type="text" className="grow" placeholder="Search" />
//           </label>
//           {/* user info */}
//           <div className="flex gap-2">
//             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
//               <path strokeLinecap="round" strokeLinejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802" />
//             </svg>

//             <label className="swap swap-rotate">
//               {/* this hidden checkbox controls the state */}
//               <input type="checkbox" onChange={changeTheme} checked={theme === Theme.DARK} />
//               {/* sun icon */}
//               <svg
//                 className="swap-off size-6 fill-current"
//                 xmlns="http://www.w3.org/2000/svg"
//                 viewBox="0 0 24 24">
//                 <path
//                   d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
//               </svg>
//               {/* moon icon */}
//               <svg
//                 className="swap-on size-6 fill-current"
//                 xmlns="http://www.w3.org/2000/svg"
//                 viewBox="0 0 24 24">
//                 <path
//                   d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
//               </svg>
//             </label>
//           </div>
//         </div>

//         <div className="mt-4">
//           <button onClick={toggleSidebar} className="p-2 bg-blue-500 text-white">
//             {isSidebarOpen ? 'Hide Sidebar' : 'Show Sidebar'}
//           </button>
//           <p className="mt-4">
//             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
//             pulvinar, nisl nec vestibulum ultricies, libero
//           </p>
//         </div>
//       </div>
//     </div>
//   );
// }
